<template>
  <div class="user-menu">
    <!-- 系统配置 -->
    <a-icon type="setting" title="系统配置" @click="visible = true" />
    <!-- 是否全屏组件 -->
    <screen-full></screen-full>
    <!-- 用户信息 -->
    <a-dropdown placement="bottomRight">
      <div class="ant-dropdown-link">
        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        admin
      </div>
      <a-menu slot="overlay">
        <a-menu-item key="0">
          <router-link :to="{ name: 'HomePage' }">
            <icon-font type="icon-shouye" />
            账号主页
          </router-link>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="1">
          <router-link :to="{ name: 'SystemHelp' }">
            <icon-font type="icon-bangzhu" />
            系统帮助
          </router-link>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3">
          <a href="javascript:;" @click="loginOut">
            <icon-font type="icon-tuichu" />
            退出登录
          </a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>

    <!-- 系统配置抽屉 -->
    <a-drawer
      title="系统配置"
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
      width="20%">
      <setting-Drawer></setting-Drawer>
    </a-drawer>
  </div>
</template>

<script>
import { ScreenFull, SettingDrawer } from '@/components'
export default {
  name: '',
  components: {
    ScreenFull,
    SettingDrawer
  },
  data () {
    return {
      visible: false
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 退出系统
    loginOut () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗?',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          sessionStorage.removeItem('ACCESS_TOKEN')
          window.location.reload()
        }
      })
    },
    onClose () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.user-menu {
  height: 100%;
  display: flex;
  align-items: center;
  .anticon {
    margin-right: 20px;
    font-size: 20px;
  }
  .ant-dropdown-link {
    height: 56px;
    line-height: 56px;
    cursor: pointer;
  }
}
.ant-dropdown {
  .ant-dropdown-menu {
    width: 200px;
    .anticon {
      margin-right: 6px;
    }
  }
}
</style>
